<template>
  <view class="body-content">
    <z-paging
        ref="paging"
        v-model="dataList"
        @query="queryList"
        :fixed="true"
    >
      <view class="page-space"></view>
      <view class="page-list">
        <view v-if="false" class="list-child" @click="toDetail">
          <image class="child-icon" :src="`${$domain}/static/icons/guest/massage.svg`" mode="aspectFill"></image>
          <view class="child-data">
            <view class="child-text data-title">
              系统消息
            </view>
            <view class="child-text data-tip">
              有一个消息待您回复哦~
            </view>
          </view>
          <view class="child-right">
            <view class="right-time">
              10:23
            </view>
            <u-badge :absolute="false" numberType="overflow" type="error" count="8"></u-badge>
          </view>
        </view>
        <block v-for="(newsItem, newsIndex) in dataList" :key="newsIndex">
          <view class="list-child" @click="toDetail(newsItem)">
            <image class="child-icon" :src="newsItem.user_avatar" mode="aspectFit"></image>
            <view class="child-data">
              <view class="child-text data-title">
                {{ newsItem.user_nickname }}
              </view>
              <view class="child-text data-tip">
                {{ newsItem.content }}
              </view>
            </view>
            <view class="child-right">
              <view class="right-time">
                {{ newsItem.timeData }}
              </view>
              <view class="w-full h-[40rpx]">
                <u-badge :absolute="false" numberType="overflow" type="error" :count="newsItem.readCount"></u-badge>
              </view>
            </view>
          </view>
        </block>
      </view>
    </z-paging>

    <tabbar/>

  </view>
</template>
<script lang="ts" setup>
import {ref, shallowRef} from "vue"
import {getChatGroupListApi} from "@/api/new";
import {onShow} from "@dcloudio/uni-app";

const toDetail = (item:any) => {
  uni.navigateTo({
    url: '/packagesA/pages/massageDetail/massageDetail?group_id=' + item.id + '&goal_user_id=' + item.data_id
  })
}

const chatFormData = ref(
    {
      page_no: 1,
      page_size: 10,
    }
)

const paging = shallowRef<any>(null)
const dataList = ref()

const queryList = async (page_no:any, page_size:any) => {
  try {
    const { lists } = await getChatGroupListApi({
      page_no,
      page_size
    })
    paging.value.complete(lists)
  } catch (e) {
    console.log('报错=>', e)
    //TODO handle the exception
    paging.value.complete(false)
  }
}

//
// const getChatGroupList = async () => {
//   queryList.value = getChatGroupListApi(chatFormData.value)
// }
//
//
// onShow(() => {
//   getChatGroupList()
// })
</script>
<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
<style scoped lang="scss">
.page-space {
  width: 100%;
  height: 20rpx;
  background-color: #F0F7FF;
}
.page-list {
  .list-child {
    border-bottom: 1rpx solid #EFEFEF;
    background-color: #ffffff;
    padding: 30rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .child-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .child-data {
      margin-right: 20rpx;
      font-size: 28rpx;
      color: #999999;
      width: 100%;
      .data-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #111111;
        margin-bottom: 10rpx;
      }
    }
    .child-right {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      flex-shrink: 0;
      font-size: 24rpx;
      color: #999999;
      .right-time {
        text-align: right;
        width: 100%;
        margin-bottom: 10rpx;
      }
    }
    .child-text {
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      overflow:hidden;
      word-break: break-all;
    }
  }
}
</style>